<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Op Art Generator and Animator</title>
		<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
		<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
	</head>
	<body>
		<h1>Welcome to Op Art Generator and Animator</h1>
		<br>
		<div class="container" style="display: flex;">
        	<div style="width: 50%;">
            	<img id="outputImg" src="{{ url_for('static', filename=graph) }}" width="90%" onclick="showImg()" class="output" />
            	<p>Double Quadratic<p>
        	</div>
        	<div style="flex-grow: 1;">
        		<form action="home" method="post">
					<input type="submit" value="Back to Image Selector" id="home" class="button">
				</form>
				<br>
            	<form action="output" method="post" id="outputForm">
					<span>Transparency(%)</span>
					<input type="range" id="shapeAlpha" name="shapeAlpha_input" min="0" max="100" step="1" value="{{ initShapeAlpha }}" class="slider">
					<input type="number" id="shapeAlphaValue" name="shapeAlpha_input_textbox" min="0" max="100" step="1" value="{{ initShapeAlpha }}" required>
					<br>
					<span>Mode</span>
					<select name="mode_input" id="mode">
  						<option value="png" {% if mode == "png"%} selected {% endif %}>PNG</option>
  						<option value="svg" {% if mode == "svg"%} selected {% endif %}>SVG</option>
					</select>
					<br>
					<br>
					<span>Minimum Width</span>
					<input type="number" id="minWidth" name="minWidth_input" min="1" max="100" step="1" value="{{ initMinWidth }}" required>
					<br>
					<span>Maximum Width</span>
					<input type="number" id="maxWidth" name="maxWidth_input" min="1" max="100" step="1" value="{{ initMaxWidth }}" required>
					<br>
					<span>Valley Point</span>
					<input type="number" id="valley" name="valley_input" min="1" max="100" step="1" value="{{ initValley }}" required>
					<span id="valleyStepSpan" {% if isValley and isAnimator%} style="display: inline;" {% else %} style="display: none;" {% endif %}>Step</span>
					<input type="number" id="valleyStep" name="valleyStep_input" min="1" max="10" step="1" value="{{ initValleyStep }}" required {% if isValley and isAnimator%} style="display: inline;" {% else %} style="display: none;" {% endif %}>
					<br>
					<span>Column Number</span>
					<input type="number" id="num" name="num_input" required min="1" max="100" step="1" value="{{ initNum }}" required>
					<br>
					<span>Offset</span>
					<input type="number" id="offset" name="offset_input" required min="1" max="5" step="1" value="{{ initOffset }}" required>
					<br>
					<br>
					<span>Shape</span>
					<select name="shape_input" id="shape" onchange="showDivs(this)">
						<option value="square" {% if shape == "square"%} selected {% endif %}>Square</option>
  						<option value="dot" {% if shape == "dot"%} selected {% endif %}>Dot</option>
  						<option value="parallelogram" {% if shape == "parallelogram"%} selected {% endif %}>Parallelogram</option>
					</select>
					<br>
					<div id="shapeDiv_parallelogram" {% if shape == "parallelogram" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Angle</span>
						<input type="range" id="angle" name="angle_input" min="0" max="89" step="1" value="{{ initAngle }}" class="slider">
						<input type="number" id="angleValue" name="angle_input_textbox" min="0" max="89" step="1" value="{{ initAngle }}" required>
						<br>
					</div>
					<br>
					<span>Colour Pattern</span>
					<select name="colourPattern_input" id="colourPattern" onchange="showDivs(this)">
						<option value="random" {% if colourPattern == "random"%} selected {% endif %}>Random</option>
  						<option value="check" {% if colourPattern == "check"%} selected {% endif %}>Check</option>
  						<option value="gradient" {% if colourPattern == "gradient"%} selected {% endif %}>Gradient</option>
					</select>
					<br>
					<div id="colourPatternDiv_random" {% if colourPattern == "random" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Adjacent Probability(%)</span>
						<input type="range" id="adjacentProbability" name="adjacentProbability_input" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" class="slider">
						<input type="number" id="adjacentProbabilityValue" name="adjacentProbability_input_textbox" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" required>
						<br>
						<span>Adjacent Numbers</span>
						<input type="text" id="adjacentNums" name="adjacentNums_input" value="{{ initAdjacentNums }}" class="longTextBox" required pattern="[1-9]+[0-9]*( [1-9]+[0-9]*)*">
						<br>
						<span>Zebra Pattern Numbers</span>
						<input type="text" id="zebraNums" name="zebraNums_input" value="{{ initZebraNums }}" class="longTextBox" required pattern="[1-9]+[0-9]*( [1-9]+[0-9]*)*">
						<br>
					</div>
					<div id="colourPatternDiv_gradient" {% if colourPattern == "gradient" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Gradient Delta</span>
						<input type="range" id="gradientDelta" name="gradientDelta_input" min="0" max="100" step="1" value="{{ initGradientDelta }}" class="slider">
						<input type="number" id="gradientDeltaValue" name="gradientDelta_input_textbox" min="0" max="100" step="1" value="{{ initGradientDelta }}" required>
						<br>
						<span>Gradient Point</span>
						<input type="number" id="gradientPoint" name="gradientPoint_input" min="-100" max="100" step="1" value="{{ initGradientPoint }}" required>
						<span id="gradientPointStepSpan" {% if isGradientPoint and isAnimator%} style="display: inline;" {% else %} style="display: none;" {% endif %}>Step</span>
						<input type="number" id="gradientPointStep" name="gradientPointStep_input" min="1" max="10" step="1" value="{{ initGradientPointStep }}" required {% if isGradientPoint and isAnimator%} style="display: inline;" {% else %} style="display: none;" {% endif %}>
						<br>
						<span>Gradient Width</span>
						<input type="number" id="gradientWidth" name="gradientWidth_input" min="0" max="100" step="1" value="{{ initGradientWidth }}" required>
						<br>
					</div>
					<span>Take &#x1d432; with respect to column index &#x1d499; increasingly from left to right.</span>
					<div class="container" style="display: flex;">
						<div style="width: 50%;" id="child-1">
							<span>Left Quadratic Formula</span>
							<h2>{{formulaLeftMsg.decode('utf-8')}}</h2>
						</div>
						<div style="flex-grow: 1;" id="child-3">
							<span>Right Quadratic Formula</span>
							<h2>{{formulaRightMsg.decode('utf-8')}}</h2>
						</div>
					</div>
					<span>The width for each column is calculated by &#x1d432;<sup>Offset</sup>, i.e.</span>
					<h2>width = &#x1d432;<sup>{{initOffset}}</sup></h2>
					<input type="checkbox" id="isAnimator" name="isAnimator_input" onclick="toggleAnimator(this)" {% if isAnimator %} checked {% endif %}>
					<label for="isAnimator" class="checkBoxLabel">Animator</label>
					<div id="animatorDiv" {% if isAnimator %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Total Images</span>
						<input type="number" id="imgs" name="imgs_input" required min="1" max="30" step="1" value="{{ initImgs }}" required>
						<span>Interval (s)</span>
						<input type="number" id="interval" name="interval_input" required min="0.01" max="2" step="0.01" value="{{ initInterval }}" required>
						<br>
						<br>
						<span>Changing Variables</span>
						<br>
						<input type="checkbox" id="isValley" name="isValley_input" onclick="toggleStep(this)" {% if isValley %} checked {% endif %}>
						<label for="isValley" class="checkBoxLabel">Valley Point</label>
						<input type="checkbox" id="isGradientPoint" name="isGradientPoint_input" onclick="toggleStep(this)" {% if isGradientPoint %} checked {% endif %}>
						<label for="isGradientPoint" class="checkBoxLabel">Gradient Point</label>
					</div>
					<br>
					<input type="submit" value="Generate Image" class="button">
					<button id="showAnimation" type="button" onclick="changeImg()" {% if isAnimator %} style="display: inline;" {% else %} style="display: none;" {% endif %}>Show Animation</button>
				</form>
        	</div>
    	</div>
    	<script type="text/javascript">
    		var outputForm = document.getElementById("outputForm");
    		var inputs = outputForm.getElementsByTagName("input");
    		var selects = outputForm.getElementsByTagName("select");

    		function checkValidThenSubmit(){
    			if (outputForm.checkValidity()) {
					outputForm.submit();
				} else {
					outputForm.reportValidity();
				}
    		}

			for (let i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

			for (let i = 0; i < selects.length; i++) {
				selects[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

    		var shapeAlphaSlider = document.getElementById("shapeAlpha");
			var shapeAlphaValue = document.getElementById("shapeAlphaValue");
			shapeAlphaValue.value = shapeAlphaSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			shapeAlphaSlider.oninput = function() {
  				shapeAlphaValue.value = this.value;
			}

			// Overrides for loop on top
			shapeAlphaValue.onchange = function() {
            	shapeAlphaSlider.value = this.value;
            	checkValidThenSubmit();
            }

			var angleSlider = document.getElementById("angle");
			var angleValue = document.getElementById("angleValue");
			angleValue.value = angleSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			angleSlider.oninput = function() {
  				angleValue.value = this.value;
            }

            // Overrides for loop on top
            angleValue.onchange = function() {
            	angleSlider.value = this.value;
            	checkValidThenSubmit();
            }

            var adjacentProbabilitySlider = document.getElementById("adjacentProbability");
			var adjacentProbabilityValue = document.getElementById("adjacentProbabilityValue");
			adjacentProbabilityValue.value = adjacentProbabilitySlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			adjacentProbabilitySlider.oninput = function() {
  				adjacentProbabilityValue.value = this.value;
            }

            // Overrides for loop on top
            adjacentProbabilityValue.onchange = function() {
            	adjacentProbabilitySlider.value = this.value;
            	checkValidThenSubmit();
            }

            var gradientDeltaSlider = document.getElementById("gradientDelta");
			var gradientDeltaValue = document.getElementById("gradientDeltaValue");
			gradientDeltaValue.value = gradientDeltaSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			gradientDeltaSlider.oninput = function() {
  				gradientDeltaValue.value = this.value;
			}

			// Overrides for loop on top
			gradientDeltaValue.onchange = function() {
            	gradientDeltaSlider.value = this.value;
            	checkValidThenSubmit();
            }

			function showDivs(element) {
				randomDiv = document.getElementById("colourPatternDiv_random");
				gradientDiv = document.getElementById("colourPatternDiv_gradient");
				parallelogramDiv = document.getElementById("shapeDiv_parallelogram");
				switch (element.value) {
					case "random":
						randomDiv.style.display = 'block';
						gradientDiv.style.display = 'none';
						break;
					case "check":
						randomDiv.style.display = 'none';
						gradientDiv.style.display = 'none';
						break;
					case "gradient":
						randomDiv.style.display = 'none';
						gradientDiv.style.display = 'block';
						break;
					case "square":
						parallelogramDiv.style.display = 'none';
						break;
					case "dot":
						parallelogramDiv.style.display = 'none';
						break;
					case "parallelogram":
						parallelogramDiv.style.display = 'block';
						break;
					default:
						randomDiv.style.display = 'none';
						gradientDiv.style.display = 'none';
						parallelogramDiv.style.display = 'none';
				}
			}

			function toggleAnimator(element) {
				animatorDiv = document.getElementById("animatorDiv");
				showAnimation = document.getElementById("showAnimation");

				if (element.checked) {
					animatorDiv.style.display = "block";
					showAnimation.style.display = "inline";
				} else {
					animatorDiv.style.display = "none";
					showAnimation.style.display = "none";
				}
			}

			function toggleStep(element) {
				isAnimator = document.getElementById("isAnimator");
				switch(element.name) {
					case "isValley_input":
						stepBox = document.getElementById("valleyStep");
						stepSpan = document.getElementById("valleyStepSpan");
						break;
					case "isGradientPoint_input":
						stepBox = document.getElementById("gradientPointStep");
						stepSpan = document.getElementById("gradientPointStepSpan");
						break;
					default:
						stepBox = "undefined";
						stepSpan = "undefined";
				}
				if (element.checked && isAnimator) {
					stepBox.style.display = "inline";
					stepSpan.style.display = "inline";
				} else {
					stepBox.style.display = "none";
					stepSpan.style.display = "none";
				}
			}

			var imgSrc = "{{ url_for('static', filename=graph) }}"
			if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
				document.querySelector("img.output").style.cursor = "pointer";
			}

			function showImg() {
				if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
					window.location.href='{{ url_for("fullScreen") }}';
				}
			}

			var animator;

			function changeImg() {
				mode = document.getElementById("mode").value;
				imgs = document.getElementById("imgs").value;
				interval = document.getElementById("interval").value;
				outputImg = document.getElementById("outputImg");

				i = 1;
				animator = setInterval(function() {
					if (mode == "png") {
						outputImg.src = "/static/out/output"+i+".png";
					} else if (mode == "svg") {
						outputImg.src = "/static/out/output"+i+".svg";
					}

					if(i < imgs){
						i++;
					} else {
						i = 1;
					}
				}, interval*1000);
			}
    	</script>
	</body>
</html>